<template>
	<view class="indexBox Column iconfont"> <!-- :style=" 'margin-top:' + height + 'px;'" -->
		<view class="header-fixedBox">
			<view class="card Column">
				<view class="flex-row items-center justifyC" style="padding-bottom: 18px;">
					<view class="card_item Column" style="width: 80%;"
						@click="redirect('/pages/mine/businessData/businessData')">
						<view class="textCenter">本月累计流量</view>
						<view class="number" style="width: 240px;">
							{{ !token ? "0" : Info.teamTotalBandwidth }} MB
						</view>
					</view>
				</view>
				<view class="flex-row items-center" style="padding-bottom: 18px;justify-content: space-around;">
					<view class="card_item Column" @click="redirect('/pages/mine/revenueData/revenueData')">
						<view class="textCenter">本月累计收益</view>
						<view class="number">+{{ !token ? "0" : Info.teamMonthRewardAmount }}</view>
					</view>
					<view class="card_item Column" @click="redirect('/pages/mine/teamData/teamData')">
						<view class="textCenter">团队人数</view>
						<view class="number">+{{ !token ? "0" : Info.teamTotalPeopleNum }}</view>
					</view>
				</view>

				<view class="flex-row items-center justifyCont-bet">
					<view class="card_item Column">
						<view class="textCenter">本月新增设备</view>
						<view class="number">
							{{ !token ? "0.00" : Info.personalDeviceMonthNum }}
						</view>
					</view>
					<view class="card_item Column">
						<view class="textCenter">在线设备</view>
						<view class="number">+{{ !token ? "0" : Info.teamDeviceOnlineNum }}</view>
					</view>
					<view class="card_item Column">
						<view class="textCenter">离线设备</view>
						<view class="number">
							+{{ !token ? "0" : Info.teamDeviceOutlineNum }}</view>
					</view>
				</view>
			</view>
			<!-- 背景圆 -->
			<view class="bgColor" :style="'top:' + top"></view>
		</view>

		<view class="bodyer Column">
			<homeMenu class="homeMenu" :requireLogin="true"></homeMenu>

			<view class="deviceBox Column">
				<view class="header flex-row items-center justifyCont-bet">
					<view class="headerItem Column" style="font-size: 16px;">
						<view class="">设备总数</view>
						<view class="number flex-row">
							<h4 class="h4">{{ !token ? "0" : Info.personalDeviceTotalNum }}</h4>
							台
						</view>
					</view>
					<view class="btn flex-row items-center" @click="redirect('/pages/mine/device/addBindDevice')">添加设备
					</view>
				</view>
				<view class="footer flex-row items-center">
					<view class="item Column">
						<view class="borderLeft">今日新增</view>
						<view class="number">
							{{ !token ? "0" : Info.personalDeviceTodayNum }}
						</view>
					</view>
					<view class="item Column">
						<view class="borderLeft">在线数量</view>
						<view class="number">{{ !token ? "0" : Info.personalDeviceOnlineNum }}
						</view>
					</view>
					<view class="item Column">
						<view class="borderLeft">离线数量</view>
						<view class="number">{{ !token ? "0" : Info.personalDeviceOutlineNum }}
						</view>
					</view>
				</view>
			</view>

			<!-- 团队设备 -->
			<view class="deviceBox Column">
				<view class="header flex-row items-center justifyCont-bet">
					<view class="headerItem Column" style="font-size: 16px;">
						<view class="">团队设备总数</view>
						<view class="number flex-row">
							<h4 class="h4">{{ !token ? "0" : Info.teamDeviceTotalNum }}</h4>
							台
						</view>
					</view>
				</view>
				<view class="footer flex-row items-center">
					<view class="item Column">
						<view class="borderRight">今日新增</view>
						<view class="number">
							{{ !token ? "0" : Info.teamDeviceTodayNum }}
						</view>
					</view>
					<view class="item Column">
						<view class="borderRight">在线数量</view>
						<view class="number">{{ !token ? "0" : Info.teamDeviceOnlineNum }}
						</view>
					</view>
					<view class="item Column">
						<view class="borderRight">离线数量</view>
						<view class="number">{{ !token ? "0" : Info.teamDeviceOutlineNum }}
						</view>
					</view>
				</view>
			</view>

			<!-- <swiper class="bodyer_swiper" circular autoplay :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in Info.bannerList"
					:key="index">
					<image class="photoSize" :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper> -->
		</view>
	</view>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	import {
		apiHome,
		apiData
	} from '@/api/home.js';
	import homeMenu from "@/components/homeMenu/homeMenu.vue";

	export default {
		components: {
			homeMenu
		},
		data() {
			return {
				height: uni.getSystemInfoSync().statusBarHeight,
				top: '-230px',
				token: "",
				userInfo: '',
				Info: [],
			}
		},
		onLoad(e) {
			this.getScreenHeight();
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.homePageData();
			this.judgement();
		},
		methods: {
			judgement() {
				if (this.userInfo.token) {
					const inviter = uni.getStorageSync('inviter');
					if (this.userInfo.username === 'u6' || this.userInfo.nickname === '微信用户' || !this.userInfo.mobile || !
						inviter
						.nickname) {
						uni.$u.toast('正在前往完善个人信息~');
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/mine/editInfomation/editInfomation"
							})
						}, 1000)
					}
				}
			},
			homePageData() {
				let that = this;
				if (!that.token) {
					return;
				}
				apiData({}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}
					that.Info = res.data;
				}).catch(err => {
					console.log(err)
				})
			},
			getScreenHeight() {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.screenHeight <= 844) {
					this.top = "-120px"
				}
			},
			redirect(Url) {
				if (!this.token) {
					uni.$u.toast('请登录后操作');
					return;
				}
				uni.navigateTo({
					url: Url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.indexBox {
		justify-content: center;
		align-items: center;
		width: 100%;
		overflow: hidden;
		position: relative;

		.header-fixedBox {
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 0 16px 0;
			overflow: hidden;

			.bgColor {
				width: 140%;
				height: 58vh;
				border-radius: 100%;
				background-color: #007aff;
				position: absolute;
				top: -180px;
				left: -120px;
			}

			.card {
				z-index: 99;
				box-sizing: content-box;
				width: 100%;
				color: #fff;
				border-radius: 12rpx;
				background-color: #5c96ffd4;
				box-shadow: 0px 0px 4px #ffffff;
				padding: 14px 16px 20px;
				box-sizing: border-box;

				.card_item {
					align-items: center;
					justify-content: center;
					width: 33%;
					font-size: 14px;
				}

				.mb {
					font-weight: 500;
					font-size: 15px;
					padding-left: 4px;
				}

				.number {
					width: 100px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					text-align: center;
					font-weight: 550;
					font-size: 20px;
					padding-top: 8px;
				}
			}
		}

		.bodyer {
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 92rpx 16px 0;
			overflow: hidden;

			.deviceBox {
				box-sizing: border-box;
				width: 100%;
				border-radius: 6px;
				background-color: #fff;
				padding: 16px 12px;
				margin: 0 0 12px;

				.headerItem {

					.number {
						align-items: baseline;
						padding-top: 2px;

						.h4 {
							font-weight: 550;
							font-size: 24px;
						}
					}
				}


				.btn {
					justify-content: center;
					color: #fff;
					font-size: 14px;
					background-color: #007aff;
					border-radius: 4px;
					padding: 10px 20px;
				}

				.footer {
					justify-content: space-around;
					padding-top: 18px;

					.item {
						justify-content: center;
						align-items: center;
						width: 30%;
						font-size: 13px;
						border-radius: 6px;
						background-color: #f9f9f9;
						padding: 6px 0;
					}

					.borderLeft {
						padding-left: 6px;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							height: 12px;
							width: 2px;
							left: -1px;
							top: 2px;
							background-color: #007aff;
						}
					}

					.borderRight {
						padding-left: 6px;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							height: 12px;
							width: 2px;
							left: -1px;
							top: 2px;
							background-color: #f9b24b;
						}
					}

					.number {
						font-size: 18px !important;
						font-weight: 550;
						padding-top: 5px;
					}
				}
			}

			.homeMenu {
				width: 100%;
			}

			.title {
				font-weight: 550;
				font-size: 34rpx;
				margin-left: 28rpx;
				position: relative;
			}
		}
	}
</style>